<!--
Copyright 2020 Google LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<html lang="en">
  <head>
{% include 'shared/html_head.html' %}
  </head>
  <body>
{% include 'shared/platform_banner.html' %}
{% include 'shared/navigation.html' %}
    <!-- Main Content -->
    <main class="container">
      <!-- Alert on load -->
    {% if message != None %}
      <div class="row col-lg-12 align-items-start" id="alert-message-div" >
        <div class="col-lg">
            <div class="card snackbar-card">
              <div class="card-body snackbar-body">
                <div class="row align-items-center">
                  <div class="col">
                    <h5 id="alert-message" class="alert-message-container">
                      <div class="check-mark-container">
                        <span class="snackbar-close material-icons">check_circle</span>
                      </div>
                      {{ message }}
                    </h5>
                  </div>
                  <div class="button-icon col-auto">
                    <span class="snackbar-close material-icons" onclick="$('#alert-message-div').remove();">close</span>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </div>
    {% endif %}

      <!-- Top row - overview, account # -->
      <div class="row col-lg-12 align-items-start top-row">
        <div class="col-md-8">
          <small class="text-uppercase text-muted secondary-text">Overview</small>
          <h2 class="header-title">Checking Account</h2>
        </div>

        <div class="col-md-4 account-info text-right">
            <p>
              <span class="account-overview account-icon material-icons">info</span>
              <span class="account-num-text">Account Number:</span><span class="account-number">{{ account_id }}</span>
            </p>
        </div>
    </div>

    <!-- Balance / Deposit / Send Payment row -->
    <div class="row col-lg-12 align-items-start">
      <div class="col-lg-4">
          <div class="card">
            <div class="card-body">
              <div class="row align-items-start">
                <div class="col">
                  <p class="text-uppercase mb-3">
                    <b class="current-balance">Current Balance</b>
                  </p>
                  <span class="h1 mb-0" id="current-balance">
                    {{ format_currency(balance) }}
                  </span>
                </div>
              </div>
            </div>
        </div>
      </div>

      <!-- Buttons -->
      <div class="col-lg-4 deposit-send-payment-div">
        <div class="card card-button deposit-send-button" data-toggle="modal" data-target="#depositFunds" data-keyboard="false" data-backdrop="static">
          <div class="card-body">
            <div class="row align-items-start">
              <div class="col">
                <span class="h5 mb-0" id="depositSpan">
                  Deposit Funds
                </span>
              </div>
              <div class="button-icon col-auto">
                <span class="material-icons" id="deposit-icon">get_app</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4 deposit-send-payment-div">
        <div class="card card-button deposit-send-button" data-toggle="modal" data-target="#sendPayment" data-keyboard="false" data-backdrop="static">
          <div class="card-body">
            <div class="row align-items-start">
              <div class="col">
                <span class="h5 mb-0" id="paymentSpan">
                  Send Payment
                </span>
              </div>
              <div class="button-icon col-auto">
                <span class="material-icons" id="payment-icon">forward</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Transaction History Table -->
      <div class="row col-lg-12 mb-4 align-items-start">
        <div class="col-lg-12">
          <div class="card" class="transaction-card">
            <div class="card-table-header">
              <div class="row align-items-start">
                <div class="col">
                  <h4 class="card-header-title">
                    Transaction History
                  </h4>
                </div>
              </div>
            </div>
            <div class="table-responsive mb-0" id="transaction-table">
            {% if history is none %}
              <h4 class="card-table-header">Error: Could Not Load Transactions</h4>
            {% elif history|length == 0 %}
              <h4 class="card-table-header">No Transactions Found</h4>
            {% else %}
              <table class="table table-sm table-nowrap card-table">
                <thead class="text-uppercase">
                  <tr>
                    <th>
                      <a class="text-transaction-header">Date</a>
                    </th>
                    <th>
                      <a class="text-transaction-header">Type</a>
                    </th>
                    <th>
                      <a class="text-transaction-header">Account</a>
                    </th>
                    <th>
                      <a class="text-transaction-header">Label</a>
                    </th>
                    <th class="text-right">
                      <a class="text-transaction-header">Amount</a>
                    </th>
                  </tr>
                </thead>
                <tbody class="list" id="transaction-list">
                {% for t in history %}
                  <tr>
                    <td class="text-uppercase transaction-date">
                      <p>{{ format_timestamp_month(t.timestamp) }} {{ format_timestamp_day(t.timestamp) }}</p>
                    </td>
                    {% if t.toAccountNum == account_id %}
                      <td class="transaction-type">
                        <span class="text-debit">●</span> Credit
                      </td>
                      <td class="transaction-account">
                        {{ t.fromAccountNum }}
                      </td>
                      <td class="transaction-label">
                        {% if t.accountLabel != None %}
                          {{ t.accountLabel }}
                        {% else %}
                          <span class="transaction-label-none">None</span>
                        {% endif %}
                      </td>
                      <td class="transaction-amount transaction-amount-credit">
                        +{{ format_currency(t.amount) }}
                      </td>
                    {% elif t.fromAccountNum == account_id %}
                      <td class="transaction-type">
                        <span class="text-credit">●</span> Debit
                      </td>
                      <td class="transaction-account">
                        {{ t.toAccountNum }}
                      </td>
                      <td class="transaction-label">
                        {% if t.accountLabel != None %}
                          {{ t.accountLabel }}
                        {% else %}
                          <span class="transaction-label-none">None</span>
                        {% endif %}
                      </td>
                      <td class="transaction-amount transaction-amount-debit">
                        -{{ format_currency(t.amount) }}
                      </td>
                    {% endif %}
                  </tr>
                {% endfor %}
                </tbody>
              </table>
            {% endif %}
            </div>
          </div>
        </div>
      </div>

      <!-- Deposit Modal -->
      <div class="modal fade" id="depositFunds" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <form id="deposit-form" class="needs-validation" novalidate="" method="POST" action="/deposit">
              <div class="modal-header">
                <h3 class="modal-title header-title" id="exampleModalLongTitle">Make a Deposit</h3>
                <button type="button" class="close deposit-cancel" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                  <div class="row">
                    <div class="col-md-10 offset-md-1 mb-4">
                      <label class="text-uppercase text-muted secondary-text mb-3" for="accounts">External Account</label>
                      <select class="custom-select d-block w-100" id="accounts" name="account">
                        {% for account in contacts %}
                          {% if account.is_external %}
                              <option value='{"account_num": "{{ account.account_num }}", "routing_num": "{{ account.routing_num }}" }'>
                                {{ account.label }} - {{ account.account_num }} - {{ account.routing_num }}
                              </option>
                          {% endif %}
                        {% endfor %}
                        <option disabled>──────────</option>
                        <option value="add">New External Account</option>
                      </select>
                      <div id="otherDepositInputs" class="hidden">
                        <div id="alertBanner" class="alert alert-danger mt-3 mb-3" role="alert">
                          <span class="error-icon mr-2 material-icons">error</span><strong>Warning</strong>: This website is a simulation. Please don't include real personal information.
                        </div>
                        <div class="input-group mb-3">
                          <div class="input-group-prepend">
                            <span class="input-group-text"><strong class="modal-icon">#</strong></span>
                          </div>
                          <input class="form-control" type="number" step='1' id="external_account_num" name="external_account_num" min=1000000000 max=9999999999  placeholder="Account Number"/>
                          <div class="invalid-feedback">
                            Please enter a valid 10 digit account number.
                          </div>
                        </div>
                        <div class="input-group mb-3">
                          <div class="input-group-prepend">
                            <span class="input-group-text"><span class="modal-icon material-icons">account_balance</span></span>
                          </div>
                          <input class="form-control" type="number" step='1' id="external_routing_num" name="external_routing_num" min=100000000 max=999999999  placeholder="Routing Number"/>
                          <div class="invalid-feedback">
                            Please enter a valid 9 digit routing number.
                          </div>
                        </div>
                        <div class="input-group mb-3">
                          <div class="input-group-prepend">
                            <span class="input-group-text"><span class="modal-icon material-icons">label</span></span>
                          </div>
                          <input class="form-control"  type="text" id="external_label" maxLength="30" pattern="^[0-9a-zA-Z][0-9a-zA-Z ]{0,29}$" name="external_label" placeholder="Account Label (Optional)"/>
                          <div class="invalid-feedback">
                            Invalid label.
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-10 offset-md-1">
                      <label class="text-uppercase text-muted secondary-text mb-1" for="deposit-amount">Deposit Amount</label>
                      <div class="input-group mb-3">
                        <div class="input-group-prepend mr-2">
                          <span class="input-group-text"><span class="amount-font material-icons money-icon">attach_money</span></span>
                        </div>
                        <input class="form-control amount-font" type="number" autocomplete="off" step="0.01" id="deposit-amount" name="amount" placeholder="0.00" min="0.01" max="500000.00" required>
                        <div class="invalid-feedback">
                          Please enter a valid amount.
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="modal-body">
                  <div class="row align-items-end text-right">
                    <div class="col-md-10 offset-md-1 text-right align-items-end">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary btn-with-padding deposit-send-button">Deposit</button>
                      </div>
                    </div>
                </div>

              <input type="hidden" id="deposit-uuid" name="uuid">
            </form>
          </div>
        </div>
      </div>

      <!-- Send Modal -->
      <div class="modal fade" id="sendPayment" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <form id="payment-form" class="needs-validation" novalidate="" method="POST" action="/payment">
              <div class="modal-header">
                <h3 class="modal-title header-title" id="exampleModalLongTitle">Send a Payment</h3>
                <button type="button" class="close payment-cancel" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div class="row">
                  <div class="col-md-10 offset-md-1 mb-4">
                    <label class="text-uppercase text-muted secondary-text mb-3" for="payment-accounts">Recipient</label>

                    <select class="custom-select d-block w-100 mb-3" id="payment-accounts" name="account_num">
                      {% for account in contacts %}
                          {% if not account.is_external %}
                              <option value="{{ account.account_num }}">{{ account.label }} - {{ account.account_num }}</option>
                          {% endif %}
                      {% endfor %}
                      <option disabled>──────────</option>
                      <option value="add">New Recipient</option>
                    </select>
                    <div id="otherAccountInputs" class="hidden">
                      <div class="input-group mb-3">
                        <div class="input-group-prepend">
                          <span class="input-group-text"><strong class="modal-icon">#</strong></span>
                        </div>
                        <input class="form-control" type="number" step='1' id="contact_account_num" name="contact_account_num" min=1000000000 max=9999999999  placeholder="Account Number"/>
                        <div class="invalid-feedback">
                          Please enter a valid 10 digit account number.
                        </div>
                      </div>
                      <div class="input-group mb-3">
                        <div class="input-group-prepend">
                          <span class="input-group-text"><span class="modal-icon material-icons">label</span></span>
                        </div>
                        <input class="form-control"  type="text" id="contact_label" name="contact_label" maxLength="30" pattern="^[0-9a-zA-Z][0-9a-zA-Z ]{0,29}$" placeholder="Contact Label (Optional)"/>
                        <div class="invalid-feedback">
                            Invalid label.
                          </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-10 offset-md-1">
                    <label class="text-uppercase text-muted secondary-text mb-3" for="payment-amount">Transaction Amount</label>
                    <div class="input-group mb-3">
                      <div class="input-group-prepend mr-2">
                        <span class="input-group-text"><span class="amount-font material-icons">attach_money</span></span>
                      </div>
                      <input class="form-control amount-font" type="number" autocomplete="off" step="0.01" id="payment-amount" name="amount" placeholder="0.00" min="0.01" max="{{ balance / 100 if balance is not none }}" required>
                      <div class="invalid-feedback">
                        Please enter a valid amount.
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="modal-body">
                <div class="row align-items-end text-right">
                  <div class="col-md-10 offset-md-1 text-right align-items-end">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                      <button type="submit" class="btn btn-primary btn-with-padding deposit-send-button">Send</button>
                    </div>
                  </div>
              </div>

            <input type="hidden" id="payment-uuid" name="uuid">
            </form>
          </div>
        </div>
      </div>
    </main>
{% include 'shared/footer.html' %}
{% include 'shared/scripts.html' %}
    <!-- Page specific-->
    <script src="static/scripts/index.js"></script>
  </body>
</html>
